<template>
  <el-form ref="searchForm" :model="searchForm" label-width="120px">
    <el-row v-if="conditionCount > 0">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="用户手机号" prop="userPhone" label-for="userPhone">
          <el-input
            v-model="searchForm.userPhone"
            element-id="userPhone"
            placeholder="请输入用户手机号"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="用户昵称" prop="userNickname" label-for="userNickname">
          <el-input
            v-model="searchForm.userNickname"
            element-id="userNickname"
            placeholder="请输入用户昵称"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="内部单号" prop="orderNo" label-for="orderNo">
          <el-input
            v-model="searchForm.orderNo"
            element-id="orderNo"
            placeholder="请输入内部单号"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-button
          type="primary"
          style="margin-left: 10px;"
          :loading="loading.search"
          @click="handleSubmit"
        >搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
        <a v-if="conditionCount > 3" style="margin-left: 10px;" @click="collapse = !collapse">
          <el-button type="text" v-if="!collapse">
            展开
            <svg-icon icon-class="ios-arrow-down" />
          </el-button>
          <el-button v-else type="text">
            收起
            <svg-icon icon-class="ios-arrow-up" />
          </el-button>
        </a>
      </el-col>
    </el-row>
    <el-row v-if="collapse">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="外部交易号" prop="transactionNo" label-for="transactionNo">
          <el-input
            v-model="searchForm.transactionNo"
            element-id="transactionNo"
            placeholder="请输入外部交易号"
            clearable
            @keyup.enter.native="handleSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="收入或支出" prop="type">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择收入或支出"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.typeSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="收支类型" prop="subType">
          <el-select
            v-model="searchForm.subType"
            placeholder="请选择收支类型"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.subTypeSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="支付渠道" prop="payType">
          <el-select
            v-model="searchForm.payType"
            placeholder="请选择支付渠道"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.payTypeSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form-item label="账目状态" prop="accountStatus">
          <el-select
            v-model="searchForm.accountStatus"
            placeholder="请选择账目状态"
            clearable
            style="width: 100%;"
            @change="handleSubmit"
          >
            <el-option
              v-for="item in selects.accountStatusSelect"
              :value="item.value"
              :key="item.value"
              :label="item.displayValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'AccountDetailSearchQuick',
  data() {
    return {
      loading: {
        search: false,
      },
      conditionCount: 8,
      collapse: false,
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: undefined,
        sortOrder: undefined,
        id: undefined,
        idMin: undefined,
        idMax: undefined,
        userId: undefined,
        userIdMin: undefined,
        userIdMax: undefined,
        userPhone: undefined,
        userNickname: undefined,
        userIsActive: undefined,
        userIsActiveMin: undefined,
        userIsActiveMax: undefined,
        orderNo: undefined,
        transactionNo: undefined,
        amount: undefined,
        amountMin: undefined,
        amountMax: undefined,
        integral: undefined,
        integralMin: undefined,
        integralMax: undefined,
        type: undefined,
        typeMin: undefined,
        typeMax: undefined,
        subType: undefined,
        subTypeMin: undefined,
        subTypeMax: undefined,
        payType: undefined,
        payTypeMin: undefined,
        payTypeMax: undefined,
        remark: undefined,
        accountStatus: undefined,
        accountStatusMin: undefined,
        accountStatusMax: undefined,
        version: undefined,
        versionMin: undefined,
        versionMax: undefined,
        createTime: undefined,
        createTimeMin: undefined,
        createTimeMax: undefined,
        updateTime: undefined,
        updateTimeMin: undefined,
        updateTimeMax: undefined,
        isActive: undefined,
        isActiveMin: undefined,
        isActiveMax: undefined,
      },
      dataDictCodes: [
        'YES_NO',
        'INCOME_OUTGOING_TYPE',
        'FUNDS_CHANGE_TYPE',
        'PAYMENT_TYPE',
        'ACCOUNT_STATUS',
      ],
      selects: {
        userIsActiveSelect: [],
        typeSelect: [],
        subTypeSelect: [],
        payTypeSelect: [],
        accountStatusSelect: [],
        isActiveSelect: [],
      },
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'userIsActive',
              dataProp: 'userIsActiveSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'INCOME_OUTGOING_TYPE',
              formProp: 'type',
              dataProp: 'typeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'FUNDS_CHANGE_TYPE',
              formProp: 'subType',
              dataProp: 'subTypeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'PAYMENT_TYPE',
              formProp: 'payType',
              dataProp: 'payTypeSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'ACCOUNT_STATUS',
              formProp: 'accountStatus',
              dataProp: 'accountStatusSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'isActive',
              dataProp: 'isActiveSelect',
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    resetForm(excludeProps) {
      for (let key in this.searchForm) {
        if (excludeProps && excludeProps.includes(key)) {
          continue
        }
        this.searchForm[key] = undefined
      }
    },
    handleSubmit() {
      this.$emit('quickSearch')
    },
    handleReset() {
      this.$emit('researchTable')
    },
  },
}
</script>
<style>
.ivu-quick-opt {
  text-align: right;
}
</style>